<template>
  <!--第一栏开始-->
  <div class="dashboard-container">
  <el-row>
    <el-col :span="3">
      <p style="font-size: larger">用例管理</p>
    </el-col>
    <el-col :offset="14" :span="7" style="margin-top: 15px">
        <span>
          <el-button class="proButton" @click="Viewreport">查看用例执行报表</el-button>
        </span>
      <span style="margin-left: 20px">
          <el-dropdown
            @command="handleCommand"
            :tabindex="4"
            trigger="click">
            <el-button>
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="导出用例" disabled>导出用例</el-dropdown-item>
             <el-dropdown-item command="导入用例">
               <el-upload 
                  action="http://localhost:8084/example/importExampleExcel"
                  :show-file-list=false
                  :data="{'proId':projectId,'userId':userInfo.id}"
                  :on-success="uploadSuccess"
                  :on-error="uploadError"
                  multiple>
                  <el-button type="text">导入用例</el-button>
                </el-upload>
              </el-dropdown-item>
             <el-dropdown-item command="导入导出配置" disabled>导入导出配置</el-dropdown-item>
             <el-dropdown-item command="用例统计" disabled>用例统计</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
    </el-col>
  </el-row>
    <!--  第一列结束-->
    <el-divider></el-divider>
    <!--第二栏开始-->
    <el-row  style="border: 1px solid #f0f2f5; line-height: 40px">
<!--      <el-col :span="5">-->
<!--      <span>用例组</span>-->
<!--      </el-col>-->
      <el-col :span="19"></el-col>
    </el-row>
    <!--第二栏结束-->
    <!--第三栏开始-->
    <div style="margin-top: 15px">
<!--    <el-col style="" :span="5">-->
<!--      <span>根用例组</span>&lt;!&ndash;   第一列     &ndash;&gt;-->
<!--    </el-col>-->
<!--    <el-col :span="19">&lt;!&ndash;   第二列     &ndash;&gt;-->
    <div>
      <el-radio-group>
        <span>
          <el-button class="proButton" @click="AddExample">新增用例</el-button>
        </span>
        <span style="margin-left: 5px">
          <el-button class="proButton" @click="EmptyState">清空执行状态</el-button>
        </span>
      </el-radio-group>
    </div>
      <!--第三栏结束-->
    <!--第四栏开始-->
      <div style="margin-top: 10px">
        <example-table ref="exampleTable"></example-table>
      </div>
      <!--第四栏结束-->
<!--    </el-col>-->
    </div>
    <!--新增用例的弹框-->
    <el-dialog title="新增用例" :visible.sync="addDialogVisible">
      <el-form :model="example">
        <el-form-item label="用例名称">
          <el-input v-model="example.exampleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="前提条件" >
          <el-input  v-model="example.prerequisites" type="textarea" :rows="3" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用例描述" >
          <el-input v-model="example.exampleDescription" type="textarea" :rows="3" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSuccess">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 清空执行状态的弹窗 -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      width="30%">
      <span>
        <el-result icon="warning" title="警告,会把所有选中的用例清空执行状态！是否继续">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogSureDelete">确认</el-button>
            <el-button size="medium" @click="deleteDialogVisible = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
    <!--  弹出框 显示用例详情的  -->
    <el-drawer
      title=">>用例详情"
      size='60%'
      :modal="false"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="drawerExampleInformation">
      <exampleInformation v-bind:exampleInfo="exampleInfo"></exampleInformation>
    </el-drawer>
  </div>
</template>

<script>
import exampleTable from '@/views/proDetails/exampleManage/exampleTable/index'
import exampleInformation from '@/views/proDetails/exampleManage/exampleInformation/index'
import { addExample, emptyState } from '@/api/example'
import { mapGetters } from 'vuex'

export default {
  name: 'exampleManage',
  components: { exampleTable,exampleInformation},
  data() {
    return {
      addDialogVisible: false,      // 新增用例的弹窗是否显示
      example: {                    // 新增用例时表单绑定的值
        exampleName: '',
        prerequisites: '',
        exampleDescription: '',
      },
      selectedValue: [],             //表格多选时row的数组，由table那传过来
      deleteDialogVisible: false,    //执行清空执行状态警告用户删除的
      drawerExampleInformation: false,//显示用例详情弹窗是否显示的值
      exampleInfo: '',               //绑定给详情页面的用例信息
    }
  },
  computed:{
    ...mapGetters(['projectId','userInfo'])
  },
  methods: {
    //更多操作选择器的方法
    handleCommand(command) {
      // this.$message('我是' + command)
    },
    //查看用例执行报表方法
    Viewreport(){

    },
    //新增用例方法
    AddExample(){
      this.addDialogVisible = true
    },
    //新增用例弹框点击确定的方法
    addSuccess(){
      let params = this.example
      this.$set(params,'proId',this.projectId)
      this.$set(params,'founderId',this.userInfo.id)
      addExample(params).then((res) => {
        console.log(res)
        this.$message({type: 'success',message: res.msg})
        this.$refs.exampleTable.getExamples()
        this.addDialogVisible = false
      }).catch((err) => {
        this.$message({type: 'success',message: res.msg})
      });
    },
    //清空执行状态按钮
    EmptyState(){
      this.deleteDialogVisible = true
    },
    //确定 要清空执行状态方法
    dialogSureDelete(){
      //将table组件的多选值传到该组件的selectedValue数组中
      this.selectedValue = this.$refs.exampleTable.selectExample  
      this.selectedValue.forEach(val =>{
        val.createTime = new Date(val.createTime)
      })       
      emptyState(this.selectedValue,this.userInfo.id).then(res =>{
        this.$message({type: 'success',message: res.msg})
        this.$refs.exampleTable.getExamples()
        this.deleteDialogVisible = false
      })
    },

    //批量删除方法
    BatchDeletion(){

    },
    //点击表格查看右抽屉调用方法，由子组件bugTable调用
    drawerExampleInformationChange(row){
      this.exampleInfo = row
      this.drawerExampleInformation = true
    },
    //导入成功后的回调
    uploadSuccess(){
      this.$message({type: 'success',message:'导入成功'})
      this.$refs.exampleTable.getExamples()
    },
    //导入失败后的回调
    uploadError(){
      this.$message({type: 'error',message:'导入失败'})
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="scss" scoped>

</style>
